<template>
  <div ref="dom"></div>
</template>

<script>
import echarts from 'echarts'
// import { on, off } from '@/libs/tools'
export default {
  name: 'serviceRequests',
  props: {
    xaxis: {
      type: Array
    },
    seriesData: {
      type: Array
    }
  },
  data() {
    return {
      dom: null
    }
  },
  methods: {
    handleData() {
      console.log(this.seriesData, '牧秋艳')
      this.seriesData.data.forEach((elem) => {
        this.dataSeries.push()
      })
    },
    resize() {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          top: '3%',
          left: '1.2%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.xaxis,
            axisLabel: {
              rotate: 45
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: this.seriesData[0].name,
            type: 'line',
            stack: '总量',
            areaStyle: {
              normal: {
                color: '#2d8cf0'
              }
            },
            data: this.seriesData[0].data
          }
          // {
          //   name: this.seriesData[1].name,
          //   type: 'line',
          //   stack: '总量',
          //   areaStyle: {
          //     normal: {
          //       color: '#10A6FF'
          //     }
          //   },
          //   data: this.seriesData[1].data
          // },
          // {
          //   name: this.seriesData[2].name,
          //   type: 'line',
          //   stack: '总量',
          //   areaStyle: {
          //     normal: {
          //       color: '#0C17A6'
          //     }
          //   },
          //   data: this.seriesData[2].data
          // },
          // {
          //   name: this.seriesData[3].name,
          //   type: 'line',
          //   stack: '总量',
          //   areaStyle: {
          //     normal: {
          //       color: '#4608A6'
          //     }
          //   },
          //   data: this.seriesData[3].data
          // }
        ]
      }
      this.$nextTick(() => {
        this.dom = echarts.init(this.$refs.dom)
        window.addEventListener('resize', () => {
          this.dom.resize()
        })
        this.dom.setOption(option)
      })
    }
  },
  mounted() {
    this.resize()
  },
  beforeDestroy() {
    // off(window, 'resize', this.resize)
  }
}
</script>
